<template>
  <baidu-map ref="map" v-if="center" class="map" :center="center">
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <bm-navigation
      type="BMAP_NAVIGATION_CONTROL_LARGE"
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
    ></bm-navigation>
    <my-overlay
      v-for="item in overlays"
      :key="item.value"
      :item="item"
      @change="change(item)"
    />
  </baidu-map>
</template>

<script>
import { getMap } from '@/api/city.js'
import MyOverlay from './MyOverlay.vue'
export default {
  components: { MyOverlay },
  props: {
    city: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      overlays: [],
      center: null,
      id: null,
      zoom: 11
    }
  },

  created () {
    this.id = this.city.id
    this.center = this.city.city
  },
  watch: {
    id () {
      this.loadMap()
    }
  },

  methods: {
    async loadMap () {
      try {
        const res = await getMap(this.id)
        this.overlays = res.data.body
      } catch (_) {}
    },
    change (e) {
      this.id = e.value
      this.center = {
        lng: e.coord.longitude,
        lat: e.coord.latitude
      }
      if (this.overlays.length === 1) {
      } else {
        this.loadMap()
        // console.log(this.$refs.map)
      }
    }
  }
}
</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 100%;
}
</style>
